<template>
  <div
      v-for="(item, index) in listFlow"
      :key="item.id"
      class="flex "
  >
    <div class="flex-column-center tw-w-22 ">
      <span class="tw-bg-[#DDDFE8] tw-w-3 tw-h-6"> </span>
      <div
          class="tw-w-12 tw-h-12 bg-color-white circle-exam border-box tw-rounded-full"
      ></div>
      <span
          v-if="index !== listFlow.length - 1"
          class="tw-bg-[#DDDFE8] tw-w-3 tw-flex-1"
      >
      </span>
    </div>
    <div class="tw-pb-8">
      <div class="flex-middle tw-mb-14">
        <div
            class="tw-w-72 tw-h-24 font-small  flex-all-center tw-mr-4 tw-rounded-[12px] tw-bg-[#04addb] tw-text-white"
        >
          {{ item.name }}
        </div>
        <span class="font-mini tw-text-[#FF0909]">{{ item.subTitle }}</span>
      </div>
      <div
          class="tw-w-236  tw-px-5 tw-py-4 border-box tw-bg-[#e4f4f9] tw-relative flex tw-flex-wrap"
      >
        <el-icon class="tw-absolute  tw-left-20 -tw-top-20 -tw-z-1" color="#e4f4f9" size="30">
          <CaretTop/>
        </el-icon>
        <p
            v-for="(items, index) in item.articleMap"
            :key="items.id"
            class=" font-mini tw-text-[#171920] hover:tw-text-[#04addb]   tw-mx-10 tw-h-24  tw-leading-[24px] tw-cursor-pointer "
            @click="goNewsInfo(items.id)"
        >
         {{ items.value }}
        </p>
      </div>
    </div>
  </div>
</template>
<script setup>
import {CaretTop} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";

const router = useRouter();
let props = defineProps({
  listFlow: {
    type: Array,
    default: [],
  },
});
let emits=defineEmits(['goNewsInfo'])
function goNewsInfo(id) {
  emits('goNewsInfo',id)
  // const resolve = router.resolve({
  //   path: "/article/info",
  //   query: {
  //     id: id,
  //   },
  // });
  // const {href} = resolve;
  // window.open(href, "_blank");
}
</script>
<style lang="scss" scoped>
.circle-exam {
  border: 4px solid #04addb;
}
</style>
